<template>
  <div>
    <el-card style="margin: 20px">
      <el-tabs>
        <!-- 放置页签 -->
        <el-tab-pane label="角色管理">
          <!-- 新增角色按钮 -->
          <el-row style="height: 60px">
            <el-button
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click="addRole"
              >新增角色</el-button
            >
          </el-row>
          <!-- 表格 -->
          <el-table border="" :data="roleList">
            <el-table-column
              label="序号"
              width="120"
              type="index"
              align="center"
            />
            <el-table-column label="角色名称" width="240" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="操作">
              <!-- 作用域插槽，获取每一行的数据，$index为索引值，row为每一行的数据，名字不能变化。 -->
              <template slot-scope="{ row, $index }">
                <el-button size="small" type="success" @click="assignRole(row)" 
                  >分配权限
                </el-button>
                <el-button size="small" type="primary" @click="editRole(row)"
                  >编辑</el-button
                >
                <el-button size="small" type="danger" @click="deleteRole(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 60px"
          >
            <!-- 分页组件 -->
            <el-pagination layout="prev,pager,next" />
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="公司信息">
          <el-alert
            title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
            type="info"
            show-icon
            :closable="false"
          />
          <el-form
            label-width="120px"
            style="margin-top: 50px"
            :model="companyInfo"
          >
            <el-form-item label="公司名称">
              <el-input
                disabled
                style="width: 400px"
                v-model="companyInfo.name"
              />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input
                disabled
                style="width: 400px"
                v-model="companyInfo.companyAddress"
              />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                disabled
                style="width: 400px"
                v-model="companyInfo.mailbox"
              />
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                :rows="3"
                disabled
                style="width: 400px"
                v-model="companyInfo.remarks"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <Dialog
        :showDialog.sync="showDialog"
        ref="editDetail"
        :detail="detail"
        @getRole="getRole"
      ></Dialog>
      <treeAssign :showAssign.sync="showAssign" ref="assign"></treeAssign>
    </el-card>
  </div>
</template>

<script>
import treeAssign from "./treeAssign";
import Dialog from "./dialog";
import { getRoleList, getCompanyInfo, deleteRole } from "@/api/setting";
import { mapState } from "vuex";
export default {
  name: "setting",
  components: {
    Dialog,
    treeAssign,
  },
  data() {
    return {
      detail: {},
      showAssign:false,
      showDialog: false,
      activeName: "second",
      pagination: {
        page: 1,
        pagesize: 10,
        total: 0,
      },
      roleList: [],
      companyInfo: {},
    };
  },
  created() {
    this.getRole();
    this.getCompany();
    console.log(this.points,"points");
  },
  computed: {
    ...mapState("user", ["userinfo"]),
    ...mapState("permission",['points']),
    // 按钮权限，功能权限看points，是否有这个权限标识，没有则禁用该按钮。
    assignPoint(){
     return this.points.some(item=>{
          item = 'assignPermission'
      })
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async getRole() {
      const obj = {
        page: this.pagination.page,
        pagesize: this.pagination.pagesize,
      };
      let result = await getRoleList(obj);
      console.log(result);
      this.roleList = result.rows;
      this.pagination.total = result.total;
    },
    async getCompany() {
      let result = await getCompanyInfo(this.userinfo.companyId);
      console.log(result);
      this.companyInfo = result;
    },
    deleteRole(row) {
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let result = await deleteRole(row.id);
          this.getRole();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑角色
    editRole(row) {
      this.detail = row;
      this.$refs.editDetail.getDetail(row.id);
      this.showDialog = true;
    },
    addRole() {
      this.showDialog = true;
    },
    // 给角色分配权限
    assignRole(row) {
      this.showAssign = true;
      this.$refs.assign.getPermission(row.id);
    },
  },
};
</script>

<style>
</style>